iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 18
0

讓我們在 APP 中實作複製&貼上的功能吧

? 隕石小故事

其實這個功能蠻正常的,就只是單純在手機中實現複製和貼上的功能,比較特別的是他想要攔截使用者剪貼簿的功能,一個偷偷獲取複製內容的概念。

Overview

複製貼上這個看似只有在電腦上常見的功能,其實如果能在手機中能夠實現是很實用的,有時候我們就是想要擷取部分文章中的內容或是圖片,整理或存儲到其他的地方。那這篇文章就來帶大家實作 APP 中複製貼上的功能了。


實作

|將內容寫進剪貼簿

我們可以透過 UIPasteboard 這個 singleton 來獲取剪貼簿內容並且更改剪貼簿內容,其中剪貼簿也支援許多的類型,像是:stringurlimagedata等等,並且也能夠同時存入多個內容 stringsurlsimages。接著讓我們實際操作看看吧!

這邊想要測試的話可以一行一行測試,不然貼上的時候會以最後被加入剪貼簿的為準,以上面的例子來說的話貼上時就會是 url 的內容。

而如果想要讀取內容只需要 UIPasteboard.general.strings 這樣就能讀取剪貼簿中的內容了,當然我們也可以透過 UIPasteboard.general.hasStrings 來判斷剪貼簿中是否有想要的值。

| 製作複製元件

+建立 CopyableLabel

那就讓我們來試試看製作能夠被複製的元件吧。首先我們先做 UILabel 的部分,首先我們建立一個 CopyableLabelclass 並且繼承 UILabel

首先我們新增兩個方法。其中 setLongPressGesture 用來設置 Label 長按手勢的部分,而長按手勢所執行的方法是我們的 showMenu。而 showMenu 這個方法會讓我們的 Label 成為 firstResponder 並且顯示我們的 UIMenuController

接著我們 override copy 函數,在其中將我們 Label 上的內容賦給 UIPasteboard.general.string 並且隱藏 UIMenuController

然後我們 override canPerformAction,其中判斷我們的 action 是否為 UIResponderStandardEditActions.copy 並且 return 它,如此一來,copy 以外其他的 action 都不會出現在 MenuController 的項目中:

最後別忘了在 init 中加入我們 setLongPressGesture 來設置手勢,並且設置 CopyableLabelcanBecomeFirstResponder 設置為 true,允許成為第一響應者:

最後來看一下 CopyableLabel 整體的程式碼:

接著重要的 Demo 畫面:

+建立 ModifiableImageView

接著讓我們建立一個可以做修改的 ImageView 元件,我們一樣新增一個 class 並且繼承 UIImageView。而整體的部分就跟上面差不多,只是 text 的部分換成 image 而已,那這邊我們剛剛做了複製,現在就來做個「貼上」和「刪除」吧,

接著我們在我們剛剛新增的 ModifiableImageView 中新增 pastedelete 函數:

這邊我們 paste 的時候將 UIPasteboard.general.image 給我們自身的 image。而 delete 的時候則是把我們的 image 設為 nil

最後別忘了修改 canPerformAction 中的內容,我們在它 UIResponderStandardEditActionspastedelete 時也返回 true:

最後讓我們來看看實際的操作吧:


Summary

這次教學之後,希望大家學會如何在 iOS 上實現複製、貼上及刪除的功能,當然還有許多其他的功能沒有提到,各位讀者們也能夠自己去搜尋科普看看。最後如果有更好的做法和方式,也歡迎跟我交流分享。


上一篇
D17 - __,請收下我的 QRCode!!
下一篇
D19 - 自己的資料自己管
系列文
諸神黃昏下的 iOS 工程師31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言